/* 
1 页面初始化渲染
  1 页面就显示百度地图
  2 让地图显示我的当前位置 
  3 如何描绘多个 区域的圆圈效果   有点难度 
    1 接口返回数据 (肯定有经纬度数据)
    1 先把 "广州" 发送到后台  后台会返回  城市的id   (房源数据 只有 北京 上海 广州 深圳,有房源数据 )
    2 将城市的id 发送给后台 返回 这个城市对应的 区的房源信息
2 点击房子之后
  0 点击事件 
  1 清除旧的覆盖物   map.clearOverlays();
  2 重新定位 && 地图被放大
  3 加载被点击的房源数据 
3 数据每次显示效果 不同
  1 数据第一次显示
    1 覆盖物 圆圈  点击覆盖物  放大 和 定位  和 加载下一层数据
  2 数据第二次显示
    1 覆盖物 圆圈  点击覆盖物  放大 和 定位  和 加载下一层数据
  3 数据第三次显示
    1 覆盖物 矩形  点击覆盖物 显示 该房源的信息的图片数据 
4 拖动地图 隐藏div
  1 找地图的api 

 */
import React, { Component } from 'react';
import indexCss from "./index.module.scss";
import { NavBar, Icon } from 'antd-mobile';
import { baseURL, request } from "../../utils/request";
import { connect } from "react-redux";
import HouseItem from "../../components/HouseItem";

console.log("地图找房");
const BMap = window.BMap;
let map = null;
class Index extends Component {

  // 如果全局变量放入state 那么就表示这个数据应该要在rende中渲染出来
  // 否则如果只是作为一个全局变量使用的话 那么没必要使用state this.viewInfo 即可
  state = {
    // viewInfo: [
    //   { level: 1, cls: "circle", zoom: 10 },
    //   { level: 2, cls: "circle", zoom: 12 },
    //   { level: 3, cls: "rect", zoom: 16 }
    // ],
    // viewTime: 0,
    // 房源图片信息显示
    show: false,
    // 房源图文信息
    houseList: []
  }

  // viewInfo=[]  可以设置普通的全局变量 this.viewInfo 

  // 可以返回 地图显示次数的 信息
  getZoom = (function () {
    // 这个地方的变量会被缓存
    const viewInfo = [
      { level: 1, cls: "circle", zoom: 10 },
      { level: 2, cls: "circle", zoom: 12 },
      { level: 3, cls: "rect", zoom: 16 }
    ];
    let viewTimes = -1;
    return function () {
      // 会被多次调用 
      viewTimes++;
      if (viewTimes === viewInfo.length) { viewTimes = 0 };
      return viewInfo[viewTimes]
    };
  })();

  async componentDidMount() {

    map = new BMap.Map("map_view");

    // 地图拖拽事件
    map.addEventListener("dragstart",()=>{
      console.log("地图被拖拽");
      this.setState({show:false})
    })

    map.addControl(new BMap.NavigationControl());// 平移缩放控件
    map.addControl(new BMap.ScaleControl()); // 比例尺

    //  获取 城市对应的id
    const res = await request.get("/area/info", { params: { name: this.props.cityName } });
    const id = res.body.value;

    // 根据id来描绘 覆盖物
    this.drawOverlay(id, this.props.cityName);
  }

  // 根据房屋的id 来加载 图文详情
  async getHourceIntroduce(cityId) {
    const res = await request.get("/houses", { params: { cityId } });

    this.setState({
      houseList: res.body.list,
      show:true
    })
  }

  // 根据id 来 描绘 覆盖物 positionPoint=城市名称||经纬度 点坐标
  drawOverlay = async (id, positionPoint) => {
    // 结构出来  地图显示的相关 数据
    const viewObj = this.getZoom();

    map.centerAndZoom(positionPoint, viewObj.zoom);

    const res2 = await request.get("/area/map", { params: { id } });

    // 获取 房源的数组
    const houseList = res2.body;

    // 循环生成 文本标签 
    houseList.forEach(house => {
      const point = new BMap.Point(house.coord.longitude, house.coord.latitude);
      const opts = {
        position: point   // 指定文本标注所在的地理位置
      }
      // indexCss[viewObj.cls] 等价于 indexCss.circle 或者 indexCss.rect 取决于  viewObj.cls
      const label = new BMap.Label(`<div class="${[indexCss.house_label, indexCss[viewObj.cls]].join(" ")}"  ><span>${house.label}</span><span>${house.count}套</span></div>`, opts);

      // 动态 属性名 
      // const cls = indexCss[viewObj.cls];
      // let cls = "";
      // if (viewObj.cls === "circle") {
      //   cls = indexCss.circle;
      // } else if (viewObj.cls === "rect") {
      //   cls = indexCss.rect
      // }

      // const label = new BMap.Label(`<div class="${[indexCss.house_label, cls].join(" ")}"  ><span>${house.label}</span><span>${house.count}套</span></div>`, opts);  // 创建文本标注对象

      // let label = "";
      // if (viewObj.cls === "circle") {
      //   label = new BMap.Label(`<div class="${[indexCss.house_label, indexCss.circle].join(" ")}"  ><span>${house.label}</span><span>${house.count}套</span></div>`, opts);  // 创建文本标注对象
      // }else if (viewObj.cls === "rect") {
      //   label = new BMap.Label(`<div class="${[indexCss.house_label, indexCss.rect].join(" ")}"  ><span>${house.label}</span><span>${house.count}套</span></div>`, opts);  // 创建文本标注对象
      // }
      label.setStyle({
        border: "none",
        backgroundColor: "transparent"
      });

      // 给label绑定点击事件  宏任务 微任务   事件队列  
      label.addEventListener("click", () => {
        if (viewObj.level >= 3) {
          console.log("加载详细的房源信息");
          // 发送请求 获取 房源图文详情 
          this.getHourceIntroduce(house.value);
        } else {
          // 正常点击
          // 1 清空旧的覆盖物
          setTimeout(() => {
            map.clearOverlays();
          }, 0);
          // 2 放大的 和 定位

          // 3 根据被点击 房源 来获取它的id 然后 执行 重复的工作 
          const newId = house.value;
          this.drawOverlay(newId, point);
        }

      })
      map.addOverlay(label);
    })
  }

  // 根据被点击房源 来加载 房源图文详情
  getHouseDetail = () => {
    this.setState({ show: true });
  }


  render() {
    const { houseList } = this.state;
    return (
      <div className="map_found">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.goBack()}
        >城市选择 {this.props.cityName} </NavBar>
        <div className={indexCss.map_found_view}>
          <div id="map_view" className={indexCss.map_view}></div>
          {this.state.show && <div className={indexCss.house_detail}>
            <div className={indexCss.house_detail_title}>
              <span>房屋列表</span>
              <span>更多房源</span>
            </div>
            <div className={indexCss.house_detail_list}>
              {houseList.map(house => <HouseItem house={house}   key={house.houseCode}  />)}
            </div>
          </div>}
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  cityName: state.mapReducer.cityName
})

const mapDispatchToProps = (dispatch) => ({})





export default connect(mapStateToProps, mapDispatchToProps)(Index);